<template>
    <el-card class="ipt-card">
        <div class="disCard">
            <img :src="clinicList[index]?.imageUrl" width="300px" height="300px" />
            <div class="text-content">
                <div class="location">
                    诊所名：{{ clinicList[index].name }}<br />
                    诊所地址：{{ clinicList[index].address }}<br />
                    诊所介绍：<div class="text-container">
                        {{ clinicList[index].detail }}
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </el-card>
    <div class="ipt-result">
        <el-row :gutter="1">
            <el-col :span="24">
                <div class="ipt-clume">
                    <el-card class="ipt-card" v-for="(item) in doctorList">
                        <div class="doctorCard">
                            <img :src="item.imageUrl" width="300px" height="300px" />
                            <div class="text-content">
                                <div class="locations">
                                    医生名：{{ item.name }}<br />
                                    医生职位：{{ item.degrees }}<br />
                                    医生工作室：{{ item.workRoom }}
                                    医生介绍：<div class="text-container">
                                        {{ item.detail }}
                                    </div>
                                    <br />
                                </div>
                                <div class="button-container">
                                    <el-button type="danger" @click="Register(item.doctorId)">预约</el-button>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <br />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
export default {
    name: 'pesshakdl'
}
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { DoctorStore, Doctor } from '@/types/doctor';
import { ClinicsStore, Clinic } from '@/types/clinic';
import axios from '../utils/request.ts'

const doctorStore = DoctorStore();
const doctorList = doctorStore.getDoctorList();

const clinicsStore = ClinicsStore();
const clinicList = clinicsStore.clinics;

const userId = Number(localStorage.getItem('users_id'))

let index = ref(1);

let indexs: string
let clinicId: string
onMounted(() => {
    indexs = localStorage.getItem('search_index')
    clinicId = localStorage.getItem('search_id')
    index.value = Number(indexs)
    GetDoctors(Number(clinicId))
    ElMessage.success(index + clinicId)
});

const GetDoctors = async (id: Number) => {
    try {
        const res = await axios.get('/clinic/show?clinicId=' + id);
        const { message, data } = res.data;
        if (message === 'success') {
            doctorList.length = 0;
            for (let i = 0; i < data.doctors.length; i++) {
                const d: Doctor = {
                    doctorId: data.doctors[i].id,
                    name: data.doctors[i].name,
                    imageUrl: data.doctors[i].imageUrl,
                    detail: data.doctors[i].detail,
                    degrees: data.doctors[i].degrees,
                    workRoom: data.doctors[i].workRoom
                }
                doctorList.unshift(d);
            }

            console.log('All data fetched successfully');
            return;

        } else {
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

const Register = async (doctor_id: number) => {
    try {
        const res = await axios.post('/reservation/add', {
            'user_id': userId,
            'doctor_id': doctor_id,
        });
        const { message, data } = res.data;
        if (message === 'success') {
            ElMessage.success("预约成功，请去个人中心填写症状说明，reservationId = " + data.reservationId)
            console.log('All data fetched successfully');
            return;
        } else {
            ElMessage.error("预约失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

</script>

<style scoped>
.ipt-card {
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    justify-content: center;
}

.ipt-result {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    /* 图片和文字容器之间的间距 */
}

.ipt-clume {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.disCard {
    display: flex;
    gap: 10px;
    /* 每段文字之间的间距 */
    font-size: 20px;
}

.text-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doctor-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.locations {
    width: 200px;
    /* 设置固定宽度 */
    word-wrap: break-word;
    /* 支持旧浏览器 */
    overflow-wrap: break-word;
    /* 用于新浏览器 */
}
</style>